<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" style="display: flex;">
      <el-form-item label="车牌号码">
        <el-input v-model="inputNum" placeholder="请输入车牌号码" />
      </el-form-item>
      <el-form-item label="车主姓名">
        <el-input v-model="inputNum" placeholder="请输入车主姓名" />
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="inputNum" placeholder="未选择" />
      </el-form-item>
    </el-form>
    <div>
      <el-button>添加月卡</el-button>
      <el-button>批量删除</el-button>
      <el-alert
        title="提示"
        type="warning"
        description="本园区共计 1543 个车位，月卡用户 0 人，车位占有率 0.00%"
        :show-icon="false"
        :closable="false"
      />
    </div>
    <template>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="序号" width="120" />
        <el-table-column prop="personName" label="车主名称" width="120" />
        <el-table-column prop="phoneNumber" label="联系方式" show-overflow-tooltip />
        <el-table-column prop="carNumber" label="车牌号码" show-overflow-tooltip />
        <el-table-column prop="carBrand" label="车辆品牌" show-overflow-tooltip />
        <el-table-column prop="totalEffectiveDate" label="剩余有效天数" width="120" show-overflow-tooltip />
        <el-table-column prop="cardStatus" label="状态" width="100" show-overflow-tooltip />
        <el-table-column label="操作">
          <template>
            <el-button size="mini" type="text">续费</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text">编辑</el-button>
            <el-button size="mini" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template></div>
</template>

<script>
import { getMonthlyPassList } from '@/api/monthlypass'
export default {
  data() {
    return {
      params: {
        name: '',
        page: 1,
        pageSize: 10
      },
      form: {

      },
      inputNum: '',
      tableData: []
    }
  },
  created() {
    this.getMonthlyPassList()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    async getMonthlyPassList() {
      const res = await getMonthlyPassList(this.params)
      this.tableData = res.rows
    }
  }

}
</script>

<style>
.clearfix{
display: flex;

}
</style>
